<template>
    <div>
        <el-drawer lock-scroll="true" v-model="foryouStore.isdrawerOpen" direction="btt" size="100%" :modal="false">
            <button @click="simulateEsc()" class="button">
                <div class="button-box">
                    <span class="button-elem">
                        <svg viewBox="0 0 46 40" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z">
                            </path>
                        </svg>
                    </span>
                    <span class="button-elem">
                        <svg viewBox="0 0 46 40">
                            <path
                                d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z">
                            </path>
                        </svg>
                    </span>
                </div>
            </button>
            <div class="article-detail">
                <!-- 文章封面 -->
                <div class="cover-container">
                    <img :src="`${config.downloadUrl}?name=${url}`" alt="文章封面" class="cover-image" />
                </div>

                <!-- 文章标题、作者、浏览量、获赞量 -->
                <div class="article-info">
                    <h2 class="article-title">{{ title }}</h2>
                    <div class="author-info">
                        <div style="display: flex;flex-direction: row;align-items: center;">
                            <span class="author">作者: {{ articleOr }}</span>
                            <el-button @click="insertUserFollow()" v-if="isFollowShow" type="success" :icon="Plus" circle />
                        </div>
                        <br />
                        <span v-if="collaborator" class="author">协作者：{{ collaborator }}</span>
                        <span class="views">浏览量: {{ viewCount }}</span>
                        <span class="likes">评论量: {{ commentsCount }}</span>
                    </div>
                    <div style="width: 300px;margin-top: 5px;display: flex;flex-direction: row;">
                        <button @click="LikeArticle()" class="Btn">
                            <span class="leftContainer">
                                <svg fill="white" viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z">
                                    </path>
                                </svg>
                                <span class="like">Like</span>
                            </span>
                            <span class="likeCount">
                                {{ articlelike }}
                            </span>
                        </button>
                        <button style="margin-left: 20px;" @click="FavoriteArticle()" class="Btn">
                            <span class="leftContainer">
                                <svg fill="white" viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M259.3 17.8L194 150.2l-146.1 21.2c-26.2 3.8-36.7 36-17.7 54.4L97.8 331 72.4 476.2c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l169.2 70.3c23.1 9.6 50.9-7.4 46.4-33.7L478.2 331l67.6-105.2c18.9-18.4 8.5-50.6-17.7-54.4L382 150.2 316.7 17.8c-11.7-23.6-45.7-23.9-57.4 0z">
                                    </path>
                                </svg>
                                <span class="like">Favorite</span>
                            </span>
                            <span class="likeCount">
                                {{ favorite }}
                            </span>
                        </button>

                    </div>
                </div>

                <!-- 文章内容 -->
                <el-divider />
                <div class="article-content">
                    <v-md-preview :text="content"></v-md-preview>
                </div>

                <!-- 评论区域 -->
                <el-divider />
                <div class="comments">
                    <h3>评论区</h3>
                    <div style="display: flex;flex-direction: column;width: 900px;">
                        <el-input v-model="textarea" style="width: 850px;margin-top: 20px;" :rows="2" type="textarea"
                            placeholder="请发表你的看法" />
                        <!-- From Uiverse.io by adamgiebl -->
                        <button @click="toSendComment()" class="button1">
                            <div class="svg-wrapper-1">
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                        <path fill="none" d="M0 0h24v24H0z"></path>
                                        <path fill="currentColor"
                                            d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                            <span>发表</span>
                        </button>

                    </div>
                    <div v-if="comments.length == 0">
                        <div style="display: flex;flex-direction: column;align-items: center;margin-top: 100px;">
                            <div class="typewriter">
                                <div class="slide"><i></i></div>
                                <div class="paper"></div>
                                <div class="keyboard"></div>
                            </div>
                            <span style="font-size: 18px;margin-top: 10px;">暂无评论</span>
                        </div>
                    </div>
                    <el-card v-else v-for="comment in comments" :key="comment.id" class="comment-card">
                        <div class="comment-header">
                            <img :src="`${config.downloadUrl}?name=${comment.avatar}`" alt="用户头像"
                                class="comment-avatar" />
                            <div class="comment-author">{{ comment.username || '匿名用户' }}</div>
                            <div v-show="comment.userId == compearUesrId" class="comment-author">(作者)</div>
                            <div v-show="comment.userId == compercollId" class="comment-author">(协作者)</div>
                            <el-icon @click="deleteComment(comment.id)" v-show="comment.userId == compear"
                                style="margin-left: 10px;cursor: pointer;">
                                <Delete />
                            </el-icon>
                        </div>
                        <div class="comment-content">{{ comment.content }}</div>
                        <div class="comment-time">{{ comment.createTime.replace('T', ' ') }}</div>
                    </el-card>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useForYouStore } from '../../../stores/foryou';
import { getDetails, getArticleLike, getArticleFavorite, setArticleLike, setArticleFavorite } from '../../../api/article';
import config from '../../../../public/config';
import { getuserMessage } from '../../../api/user';
import { getComments, SendComments, getCommentsCount, deleteComments } from '../../../api/comments';
import { ElMessage } from 'element-plus';
import { selectFollow,insertFollow } from '../../../api/userFollow'
import { Plus, Delete, } from '@element-plus/icons-vue'
import router from '../../../router';



const foryouStore = new useForYouStore();
const content = ref('');
const url = ref('')
const title = ref('')
const viewCount = ref('')
const articleOr = ref('')
const articlelike = ref('')
const comments = reactive([])
const textarea = ref('')
const commentsCount = ref('')
const compear = localStorage.getItem("userId")
const compearUesrId = ref('')
const favorite = ref('')
const collaborator = ref('')
const compercollId = ref('')
const articleUserId = ref('')
const isFollowShow= ref(true)

onMounted(() => {
    getArticleDetails();
    getArticleLikes()
    getArticleComments()
    getCountOfComment()
    getArticleFavorites()
});

async function getArticleDetails() {
    const params = new URLSearchParams();
    params.append('id', foryouStore.articleId);
    await getDetails(params).then(res => {
        if (res.code === 200) {
            const data = res.data;
            url.value = data.pic
            title.value = data.title
            viewCount.value = data.viewCount
            content.value = data.content;
            compearUesrId.value = data.userId
            compercollId.value = data.collaboratorId
            if (data.collaboratorId != null) {
                getcollName(data.collaboratorId)
            }
            getUserName(data.userId)
            getIsFollow()
        }
    });
}

async function getUserName(id) {
    const params = new URLSearchParams();
    params.append('id', id);
    await getuserMessage(params).then(res => {
        if (res.code === 200) {
            const data = res.data;
            articleOr.value = data.username
        }
    })
}
async function getcollName(id) {
    const params = new URLSearchParams();
    params.append('id', id);
    await getuserMessage(params).then(res => {
        if (res.code === 200) {
            const data = res.data;
            collaborator.value = data.username
        }
    })
}
async function getArticleLikes() {
    const params = new URLSearchParams();
    params.append('articleId', foryouStore.articleId);
    await getArticleLike(params).then(res => {
        if (res.code === 200) {
            articlelike.value = res.data
        }
    })
}
async function getArticleComments() {
    const params = new URLSearchParams();
    params.append('articleId', foryouStore.articleId);
    const res = await getComments(params);
    if (res.code === 200) {
        comments.splice(0, comments.length, ...res.data);

        // 为每个评论获取用户信息
        for (const comment of comments) {
            getCommentUserInfo(comment);
        }
    }
}

// 获取评论用户的头像和昵称
async function getCommentUserInfo(comment) {
    const params = new URLSearchParams();
    params.append('id', comment.userId);
    const res = await getuserMessage(params);
    if (res.code === 200) {
        comment.username = res.data.username;
        comment.avatar = res.data.avatar; // 假设后端返回头像URL字段为 avatar
    }
}

function simulateEsc() {
    foryouStore.isdrawerOpen=false
    router.back()
}
async function toSendComment() {
    const data = {
        "articleId": foryouStore.articleId,
        "userId": localStorage.getItem("userId"),
        "content": textarea.value
    }

    await SendComments(data).then(res => {
        if (res.code === 200) {
            getArticleComments()
            getCountOfComment()
            ElMessage({
                type: 'success',
                message: res.data,
            });
            textarea.value = null
        }

    })
}
async function getCountOfComment() {
    const params = new URLSearchParams
    params.append('articleId', foryouStore.articleId);
    await getCommentsCount(params).then(res => {
        if (res.code === 200) {
            commentsCount.value = res.data
        }
    })
}
async function deleteComment(id) {
    const params = new URLSearchParams
    params.append("id", id)
    await deleteComments(params).then(res => {
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: res.data,
            });
            getArticleComments()
            getCountOfComment()
        }
    })
}

async function getArticleFavorites() {
    const params = new URLSearchParams
    params.append('articleId', foryouStore.articleId);
    await getArticleFavorite(params).then(res => {
        if (res.code === 200) {
            favorite.value = res.data
        }
    })
}
async function LikeArticle() {
    const params = new URLSearchParams
    params.append('articleId', foryouStore.articleId);
    params.append('userId', localStorage.getItem("userId"))
    await setArticleLike(params).then(res => {
        if (res.code === 200) {
            getArticleLikes()
            ElMessage({
                type: 'success',
                message: res.data,
            });
        }
    })
}
async function FavoriteArticle() {
    const params = {
        "articleId": foryouStore.articleId,
        "userId": localStorage.getItem("userId")
    }
    await setArticleFavorite(params).then(res => {
        if (res.code === 200) {
            getArticleFavorites()
            ElMessage({
                type: 'success',
                message: res.data,
            });
        }
    })
}
async function getIsFollow() {
    const params = new URLSearchParams();
    params.append('followerId', localStorage.getItem("userId"))
    params.append('followeeId', compearUesrId.value)
    await selectFollow(params).then(res => {
        if (res.code === 200) {
            if(res.data == true){
                isFollowShow.value = false
            }else if(res.data == false){
                isFollowShow.value =true
            }
        }
    })
}
async function insertUserFollow(){
    const params = {
    'followerId':localStorage.getItem("userId"),
    'followeeId':compearUesrId.value
    }
    await insertFollow(params).then(res => {
        if(res.code === 200) {
            getIsFollow()
            ElMessage({
                type: 'success',
                message: res.data,
            });
        }
    })
}
</script>

<style scoped>
.article-detail {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
}


.cover-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* 阴影效果 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    /* 渐变背景效果 */
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.article-info {
    margin-bottom: 20px;
}

.article-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.author-info {
    font-size: 1rem;
    color: #777;
}

.author-info span {
    margin-right: 15px;
}

.article-content {
    margin-top: 20px;
}

.comments {
    margin-top: 40px;
}

.comment-card {
    margin-bottom: 15px;
    padding: 15px;
    margin-top: 20px;
}

.comment-author {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-content {
    font-size: 1rem;
    margin-bottom: 10px;
}

.comment-time {
    font-size: 0.9rem;
    color: #999;
}

.button {
    display: block;
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    border: 0;
}

.button:before,
.button:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 7px;
}

.button:before {
    border: 4px solid #0d2ad2;
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
        transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button:after {
    border: 4px solid #040013;
    transform: scale(1.3);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

.button:hover:before,
.button:focus:before {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:hover:after,
.button:focus:after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
        transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button-box {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}

.button-elem {
    display: block;
    width: 20px;
    height: 20px;
    margin: 17px 18px 0 18px;
    transform: rotate(180deg);
    fill: #190a65;
}

.button:hover .button-box,
.button:focus .button-box {
    transition: 0.4s;
    transform: translateX(-56px);
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

/* From Uiverse.io by Nawsome */
.typewriter {
    --blue: #5C86FF;
    --blue-dark: #275EFE;
    --key: #fff;
    --paper: #EEF0FD;
    --text: #D3D4EC;
    --tool: #FBC56C;
    --duration: 3s;
    position: relative;
    -webkit-animation: bounce05 var(--duration) linear infinite;
    animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
    width: 102px;
    height: 30px;
    border-radius: 3px;
    margin-left: 14px;
    transform: translateX(14px);
    background: linear-gradient(var(--blue), var(--blue-dark));
    -webkit-animation: slide05 var(--duration) ease infinite;
    animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before,
.typewriter .slide:after,
.typewriter .slide i:before {
    content: "";
    position: absolute;
    background: var(--tool);
}

.typewriter .slide:before {
    width: 2px;
    height: 8px;
    top: 6px;
    left: 100%;
}

.typewriter .slide:after {
    left: 94px;
    top: 3px;
    height: 14px;
    width: 6px;
    border-radius: 3px;
}

.typewriter .slide i {
    display: block;
    position: absolute;
    right: 100%;
    width: 6px;
    height: 4px;
    top: 4px;
    background: var(--tool);
}

.typewriter .slide i:before {
    right: 100%;
    top: -2px;
    width: 4px;
    border-radius: 2px;
    height: 14px;
}

.typewriter .paper {
    position: absolute;
    left: 24px;
    top: -26px;
    width: 40px;
    height: 46px;
    border-radius: 5px;
    background: var(--paper);
    transform: translateY(46px);
    -webkit-animation: paper05 var(--duration) linear infinite;
    animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    border-radius: 2px;
    height: 4px;
    transform: scaleY(0.8);
    background: var(--text);
    box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
    width: 120px;
    height: 56px;
    margin-top: -10px;
    z-index: 1;
    position: relative;
}

.typewriter .keyboard:before,
.typewriter .keyboard:after {
    content: "";
    position: absolute;
}

.typewriter .keyboard:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    transform: perspective(10px) rotateX(2deg);
    transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
    left: 2px;
    top: 25px;
    width: 11px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    -webkit-animation: keyboard05 var(--duration) linear infinite;
    animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {

    85%,
    92%,
    100% {
        transform: translateY(0);
    }

    89% {
        transform: translateY(-4px);
    }

    95% {
        transform: translateY(2px);
    }
}

@keyframes slide05 {
    5% {
        transform: translateX(14px);
    }

    15%,
    30% {
        transform: translateX(6px);
    }

    40%,
    55% {
        transform: translateX(0);
    }

    65%,
    70% {
        transform: translateX(-4px);
    }

    80%,
    89% {
        transform: translateX(-12px);
    }

    100% {
        transform: translateX(14px);
    }
}

@keyframes paper05 {
    5% {
        transform: translateY(46px);
    }

    20%,
    30% {
        transform: translateY(34px);
    }

    40%,
    55% {
        transform: translateY(22px);
    }

    65%,
    70% {
        transform: translateY(10px);
    }

    80%,
    85% {
        transform: translateY(0);
    }

    92%,
    100% {
        transform: translateY(46px);
    }
}

@keyframes keyboard05 {

    5%,
    12%,
    21%,
    30%,
    39%,
    48%,
    57%,
    66%,
    75%,
    84% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    9% {
        box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    18% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    27% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    36% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
    }

    45% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    54% {
        box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    63% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
    }

    72% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    81% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
}

/* From Uiverse.io by adamgiebl */
.button1 {
    font-family: inherit;
    font-size: 15px;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    width: 100px;
    margin-top: 10px;
    margin-left: 750px;
}

.button1 span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.button1 svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.button1:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

.button1:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.button1:hover span {
    transform: translateX(5em);
}

.button1:active {
    transform: scale(0.95);
}

@keyframes fly-1 {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}

/* From Uiverse.io by vinodjangid07 */
.Btn {
    width: 140px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: none;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089);
    cursor: pointer;
    background-color: transparent;
}

.leftContainer {
    width: 60%;
    height: 100%;
    background-color: rgb(238, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.leftContainer .like {
    color: white;
    font-weight: 600;
}

.likeCount {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(238, 0, 0);
    font-weight: 600;
    position: relative;
    background-color: white;
}

.likeCount::before {
    height: 8px;
    width: 8px;
    position: absolute;
    content: "";
    background-color: rgb(255, 255, 255);
    transform: rotate(45deg);
    left: -4px;
}

.Btn:hover .leftContainer {
    background-color: rgb(219, 0, 0);
}

.Btn:active .leftContainer {
    background-color: rgb(201, 0, 0);
}

.Btn:active .leftContainer svg {
    transform: scale(1.15);
    transform-origin: top;
}
</style>